<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;}
a{text-decoration: none;color: #000;display: block;padding:0 10px;height: 40px;}
a:hover{background: #666;color: #fff;}
#nav{background: #eee;width: 600px;height: 40px;margin: 0 auto;}
ul,li{list-style: none;position: relative;}
ul li{float: left; line-height: 40px;text-align: center;}
ul li ul li{float: none;background: #eee;margin-top: 2px;}
ul li ul{position: absolute;left: 0px;top: 40px;display: none;}
ul li ul li a{width: 80px;}
ul li ul li a:hover{background: blue;}
/*ul li:hover ul{display: block;}*/
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
   $(function(){
        $(".navmenu").mouseover(function(){
            $(this).children("ul").show();
        })
        $(".navmenu").mouseout(function(){
            $(this).children("ul").hide();
        })
   })
</script>
</head>
<body>
    <div id="nav">
        <ul>
            <li><a href="">首页</a></li>
            <li class="navmenu"><a href="">课程大厅</a>
                <ul>
                    <li><a href="">javascript</a></li>
                    <li><a href=""> jquery</a></li>
                </ul>
            </li>
            <li class="navmenu"><a href="">学习中心</a>
                <ul>
                    <li><a href="">视频学习</a></li>
                    <li><a href="">案例学习</a></li>
                    <li><a href="">交流平台</a></li>
                </ul>
            </li>
            <li><a href="">经典案例</a></li>
            <li><a href="">关于我们</a></li>
        </ul>
    </div>
</body>
</html>